<template>
  <div id="echat">
    <div>
      <el-container>
        <!-- 头部 -->
        <el-header style="height: 260px;">
          <el-row :gutter="20">

            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div id="ding">总答题数量</div>
                <p id="shu">260,560</p>

                <div id="zhoutongbi">
                  <p id="zhou">
                    <i class=" el-icon-caret-bottom tubiaoyi" /> 周同比 12%
                  </p>

                  <p id="ri"><i class=" el-icon-caret-top tubiaoer" />日环比 11%</p>
                </div>
                <div id="di">日答题数量:12,234</div>
              </div>
              <div id="shiti">试题数量:10,234</div>
              <div id="qianduanshiti">前端试题:5,234</div>
              <div id="shangzhou">上周新增试题:1,234</div>

              <!-- 顶部字体 -->
              <div id="shangmianyi">试题方向</div>
              <div id="shangmianer">试题学科分布</div>
              <div id="shangmiansan">上周新增试题</div>

              <!-- 顶部图标 -->
              <el-tooltip content="指标说明" placement="top">
                <i class="el-icon-warning yi" />
              </el-tooltip>

              <el-tooltip content="指标说明" placement="top">
                <i class="el-icon-warning er" />
              </el-tooltip>

              <el-tooltip content="指标说明" placement="top">
                <i class="el-icon-warning san" />
              </el-tooltip>

              <el-tooltip content="指标说明" placement="top">
                <i class="el-icon-warning si" />
              </el-tooltip>

            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple">
                <!-- 雷达 -->
                <leida />
              </div>
            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple">
                <!-- 饼图 -->
                <bintu />
              </div>
            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple">
                <!-- 柱图 -->
                <zhutu />
              </div>
            </el-col>

          </el-row>
        </el-header>

        <!-- 底部 -->
        <el-main id="echat" style="height: 30rem">
          <el-row :gutter="21">
            <el-col :span="21">
              <div class="grid-cont bg-purple">
                <!-- 数字 -->
                <el-col :span="21">
                  <div class="grid-conk">

                    <el-col :span="18">
                      <div id="fl">
                        <el-tabs v-model="activeName">
                          <el-tab-pane label="前端课程" name="first">
                            <div ref="myDiv" class="grid-con bg-purple" />
                          </el-tab-pane>

                          <el-tab-pane label="JAVA课程" name="second">
                            <div ref="myVCD" class="grid" />
                          </el-tab-pane>
                        </el-tabs>

                      </div>
                    </el-col>

                    <div id="fo">前端与JAVA学科试题走势图</div>
                    <!-- 学科题目数量排名 -->
                    <el-col :span="6">
                      <div class="grid-conl bg-purple">
                        <p>学科题目数量排名</p>
                        <div class="xueke">
                          <span class="ziti">1</span>
                          <span class="icon">前端</span>
                          <span class="icon">5,234</span>
                        </div>

                        <div class="xueke">
                          <span class="ziti">2</span>
                          <span class="icon">JAVA</span>
                          <span class="icon">3,210</span>
                        </div>

                        <div class="xueke">
                          <span class="ziti">3</span>
                          <span class="icon">大数据</span>
                          <span class="icon">1,294</span>
                        </div>

                        <div class="xueke">
                          <span class="zi">4</span>
                          <span class="icon">c++</span>
                          <span class="icon">1,001</span>
                        </div>

                        <div class="xueke">
                          <span class="zi">5</span>
                          <span class="icon">UI</span>
                          <span class="icon">934</span>
                        </div>

                        <div class="xueke">
                          <span class="zi">6</span>
                          <span class="icon">PHP</span>
                          <span class="icon">856</span>
                        </div>

                        <div class="xueke">
                          <span class="zi">7</span>
                          <span class="icon">Python</span>
                          <span class="icon">403</span>
                        </div>

                        <div class="xueke">
                          <span class="zi">8</span>
                          <span class="icon">测试</span>
                          <span class="icon">122</span>
                        </div>

                      </div>
                    </el-col>

                  </div>
                </el-col>
                <hr>

              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import Bintu from './compenonts/bintu.vue'
import leida from './compenonts/leida.vue'
import Zhutu from './compenonts/zhutu.vue'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/chart/line')

export default {
  components: { leida, Bintu, Zhutu },
  data() {
    return {
      activeName: 'first',
      options: {
        title: {
          text: '前端总答题数量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // 放置图标
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            stack: 'Total',
            // 线是否显示平滑 true就是平滑  false就是折线
            smooth: true,
            data: [420, 632, 641, 734, 1220, 930, 920, 1000, 800, 1320, 1420, 1500]
          }
        ]
      }
    }
  },

  mounted() {
    var myChart = echarts.init(this.$refs.myDiv)
    myChart.setOption(this.options)

    this.myEcharts()
    // 雷达图
  },
  methods: {
    myEcharts() {
      var myChar = echarts.init(this.$refs.myVCD)
      var option = {
        title: {
          text: 'JAVA课程'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // 放置图标
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            stack: 'Total',
            // 线是否显示平滑 true就是平滑  false就是折线
            smooth: true,
            data: [620, 332, 541, 434, 820, 630, 920, 1000, 800, 1120, 620, 1500]
          }
        ]

      }
      myChar.setOption(option)
    }
  }
}
</script>

<style>
#echat {
  background: #e5e9f2;

}

.el-row {
  margin-bottom: 0.25rem;

}

.element.style {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 4.375rem;
  height: 210px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0px;
  margin: 0px;
  border-width: 0px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  width: 18.5rem;
  height: 16.05rem;
  margin-top: 12px;
  border-radius: 4px;
  min-height: 36px;
  padding-left: 0.7rem;

  background-color: #fff;
}

.grid-cont {
  width: 80rem;
  height:23rem;
  margin-top: -5px;
  border-radius: 4px;
  min-height: 36px;
  background-color: #fff;

}

.row-bg {
  padding: 10px 0;
}

.el-header,
.el-footer {
  background: #e5e9f2;
  color: #333;
  line-height: 60px;
}

.grid-con {
  height: 310px;
  margin-top: 8px;
  border-radius: 4px;
  min-height: 36px;
}

.grid-conl {
  width: 310px;
  height: 310px;
  margin-top: 58px;
  border-radius: 4px;
  min-height: 36px;

}

.grid-conk {
  width: 1270px;
  height: 40px;
  border-radius: 4px;
  min-height: 36px;
}

#fl {
  width: 880px;
  height: 40px;
  float: left;

}

#fo {
  position: absolute;
  top: 0;
  right: 0;
  width: 350px;
  height: 40px;
  float: right;
  color: #99a9bf;
  font-size: 15px;
  line-height: 40px;
  text-align: center;

}

#ding {
  display: inline-block;
  height: 30px;
  border-radius: 4px;
  color: #99a9bf;
  font-size: 15px;
  line-height: 30px;
  padding-left: 10px;
  padding-top: 10px;
  position: absolute;
  top: 70px;
  left: 20px;
}

#koko {
  position: absolute;
  top: 20px;
  right: 0;
}

#di {
  position: absolute;
  left: 0;
  top: 70px;
  height: 30px;
  margin-top: 170px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 30px;
  padding-left: 35px;
}

#shu {
  position: absolute;
  left: 60px;
  top: 55px;
  font-size: 40px
}

#zhou {
  position: absolute;
  left: 2.5375rem;
  top: 175px;
  font-size: 14px;

}

#ri {
  position: absolute;
  left: 166px;
  top: 175px;
  font-size: 14px;
}

#shiti {
  position: absolute;
  left: 360px;
  top: 230px;
  font-size: 16px;
}

#qianduanshiti {
  position: absolute;
  left: 680px;
  top: 230px;
  font-size: 16px;
}

#shangzhou {
  position: absolute;
  left: 1000px;
  top: 230px;
  font-size: 16px;

}

.grid {
  width: 800px;
  height: 310px;

}

/* 字体图标 */
.tubiaoyi {
  position: absolute;
  top: 22px;
  right: -20px;
  color: red;
}

.tubiaoer {
  position: absolute;
  top: 22px;
  right: -25px;
  color: green;
}

/* 上面字体 */
#shangmianyi {
  position: absolute;
  left: 22rem;
  top: 5px;
  font-size: 15px;
  color: #99a9bf;
}

#shangmianer {
  position: absolute;
  left: 43rem;
  top: 5px;
  font-size: 15px;
  color: #99a9bf;
}

#shangmiansan {
  position: absolute;
  left: 63rem;
  top: 5px;
  font-size: 15px;
  color: #99a9bf;
}

/* 图标 */
.yi {
  position: absolute;
  top: 27px;
  left: 280px;
  color: #99a9bf;
  z-index: 1111;

}

.er {
  position: absolute;
  top: 27px;
  left: 605px;
  ;
  color: #99a9bf;
  z-index: 1111;

}

.san {
  position: absolute;
  top: 27px;
  left: 925px;
  ;
  color: #99a9bf;
  z-index: 1111;

}

.si {
  position: absolute;
  top: 27px;
  left: 1250px;
  ;
  color: #99a9bf;
  z-index: 1111;

}

/* 学科排名 */
.xueke {
  display: flex;
  justify-content: space-around
}

.xueke .icon {
  width: 100px;
  height: 30px;
  font-size: 13px;
  color: #333;
}

.xueke .ziti:first-child {
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
}

.ziti {
  font-size: 13px;
  color: #fff;
}

.zi {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  border: 1px solid #000;
}
</style>
